<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*css reset 开始*/
			html,body{height: 100%;overflow: hidden;}
			html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0px;padding: 0px;font: 14px "微软雅黑";}
			a{text-decoration: none;display: block;}
			li{list-style: none;}
			img{display: block;}
			/*css reset 结束*/
			
			/*common css 开始*/
			.clearfix{*zoom: 1;}
			.clearfix:after{content: "";display: block;clear: both;}
			/*common css 结束*/
			
			/*头部样式 开始*/
			#head{background: white!important;}
			#head .headMain{width: 1100px;height: 80px;margin: 0 auto;position: relative;}
			#head .headMain > .logo{float: left;margin-top: 30px;}
			#head .headMain > .nav{float: right;margin-top: 50px;}
			#head .headMain > .nav > .list > li{float: left;margin-left: 40px;position: relative;}
			#head .headMain > .nav > .list > li .up{color: #000000;position: absolute;width: 0;overflow: hidden;transition:1s width;}
			#head .headMain > .nav > .list > li:hover .up{width: 100%;}
			#head .headMain > .arrow{width: 21px; height: 11px;background: url(img/menuIndicator.png);
										position: absolute;left: 50%;bottom: -11px;transition:1s left;}
			/*头部样式 结束*/
			
			/*内容区样式 开始*/
			#content{height: 300px;background: gray;}
			#content .list > li{position: relative;}
			#content .list > li > div{width: 1100px;height: 520px;background: pink;
									position: absolute;left: 0;right: 0;top: 0;bottom: 0;
									margin: auto;
									}
			/*内容区样式 结束*/
			
		</style>
		<!--分辨率范围:1200 - 2000-->
	</head>
	<body>
		<section id="wrap">
			<!--流体布局-->
			<header id="head">
				<!--固定布局-->
				<div class="headMain">
					<h1 class="logo">
						<a href="javascript:;">
							<img src="img/logo.png"/>
						</a>
					</h1>
					<nav class="nav">
						<ul class="list clearfix">
							<li>
								<a href="javascript:;">
									<div class="up"><img src="img/home_gruen.png"/></div>
									<div class="down"><img src="img/home.png"/></div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Course</div>
									<div class="down">Course</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Works</div>
									<div class="down">Works</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">About</div>
									<div class="down">About</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Team</div>
									<div class="down">Team</div>
								</a>
							</li>
						</ul>
					</nav>
					<div class="arrow"></div>
				</div>
			</header>
			<section id="content">
				<ul class="list">
					<li class="home">
						<div>home</div>
					</li>
					<li class="course">
						<div>course</div>
					</li>
					<li class="works">
						<div>works</div>
					</li>
					<li class="about">
						<div>about</div>
					</li>
					<li class="team">
						<div>team</div>
					</li>
				</ul>
			</section>
		</section>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			//获取dom元素
			var arrowEl = document.querySelector("#head .headMain > .arrow");
			var liNodes = document.querySelectorAll("#head .headMain > .nav > .list > li");
			var upNodes = document.querySelectorAll("#head .headMain > .nav > .list > li .up");
			var firstLiNode  = liNodes[0];
			var firstUpNode  = firstLiNode.querySelector(".up");
			 
			var head = document.querySelector("#head") ;
			var content = document.querySelector("#content") ;
			var cLiNodes = document.querySelectorAll("#content .list > li");
			//内容区
			contentBind();
			function contentBind(){
				content.style.height = document.documentElement.clientHeight - head.offsetHeight+'px';
				for(var i=0;i<cLiNodes.length;i++){
					cLiNodes[i].style.height = document.documentElement.clientHeight - head.offsetHeight+'px';
				}
			}
			 
			 
			//头部交互
			headBind();
			function headBind(){
				firstUpNode.style.width = "100%";
				arrowEl.style.left = firstLiNode.offsetLeft + firstLiNode.offsetWidth/2 - arrowEl.offsetWidth/2+"px";
				for(var i=0;i<liNodes.length;i++){
					//转绑很重要
					liNodes[i].index = i;
					liNodes[i].onclick=function(){
						//i:liNodes.length 5
						move(this.index);
					}
				}
				
				function move(index){
					for(var i=0;i<upNodes.length;i++){
						//upNodes[i].style.width="0";
						upNodes[i].style.width="";
					}
					upNodes[index].style.width="100%";
					arrowEl.style.left = liNodes[index].offsetLeft + liNodes[index].offsetWidth/2 - arrowEl.offsetWidth/2+"px";
				}
			}
			
			
		}
		
		
		
		
	</script>
</html>
